<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="660px"
    @open="handleDialogOpen()"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :model="comboModel"
      ref="comboForm"
      :rules="dialogProps.action === 'add' ? addRules : editRules"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-tabs type="card" v-model="activeTabName">
        <el-tab-pane name="comboTab" label="基本信息" class="user-info-tab-pane">
          <el-row>
            <el-col :span="12">
              <el-form-item label="套餐编号" prop="code">
                <el-input :maxlength="32" v-model="comboModel.code" autofocus></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="套餐名" prop="name">
                <el-input :maxlength="32" v-model="comboModel.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="助记名" prop="helpCode">
                <el-input :maxlength="32" v-model="comboModel.helpCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="价格" prop="price">
                <el-input :maxlength="32" v-model="comboModel.price" type="number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="适用性别" prop="sex">
                <el-select
                  class="parent-router-select"
                  v-model="comboModel.sex">
                  <el-option label="不限" value="0"></el-option>
                  <el-option label="男" value="2"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄上限" prop="maxage">
                <el-input :maxlength="32" v-model="comboModel.maxage" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄下限" prop="minage">
                <el-input :maxlength="32" v-model="comboModel.minage" type="number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="套餐封面">
                  <el-input v-model="comboModel.img" placeholder="套餐封面"></el-input>
                <!-- <el-switch v-model="comboModel.locked"></el-switch> -->
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="禁用">
                <el-switch v-model="comboModel.state"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注意事项" prop="attention">
                <el-input
                  class="properties-textarea"
                  type="textarea"
                  :rows="3"
                  v-model="comboModel.attention"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  class="properties-textarea"
                  type="textarea"
                  :rows="3"
                  v-model="comboModel.remark"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="检查项"></el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('comboForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveCombo, updateCombo } from "@/api/dingming/combo";

export default {
  name: "combo-edit",
  data() {
    return {
      loading: false,
      activeTabName: "comboTab",
      comboModel: {
        id: "",
        name: "",
        code: "",
        helpCode: "",
        sex: 0,
        maxage: "0",
        minage: "0",
        price: "",
        remark: "",
        attention: "",
        state: 0,
        img: "",
        createtime: "",
        updatetime: ""
      },
      dialogProps: {
        visible: false, //控制对话框弹出收起
        action: "", //存入add || edit
        title: "" //存入对话框标题
      },
      /**
       * 添加的验证
       */
      addRules: {
        code: [
          { required: true, message: "请输入项目编号", trigger: "blur" },
          { min: 3, max: 32, message: "长度在 3 到 32 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入项目名", trigger: "blur" },
          { min: 2, max: 32, message: "长度在 2 到 32 个字符", trigger: "blur" }
        ]
      },
      /**
       * 修改验证
       */
      editRules: {
        code: [
          { required: true, message: "请输入项目编号", trigger: "blur" },
          { min: 3, max: 32, message: "长度在 3 到 32 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入项目名", trigger: "blur" },
          { min: 2, max: 32, message: "长度在 2 到 32 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    /**
     * 点击确定按钮后判断是添加还是修改
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveCombo();
          } else {
            this.doUpdateCombo();
          }
        } else {
          return false;
        }
      });
    },
    /**
     * 修改的提交方法
     */
    doUpdateCombo() {
      this.loading = true;
      updateCombo(this.comboModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /**
     * 添加的提交方法
     */
    doSaveCombo() {
      this.loading = true;
      saveCombo(this.comboModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /**
     * 点击取消按钮
     */
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
    /**
     * 弹框时触发的函数
     * 用来清除表单验证
     */
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["comboForm"].clearValidate();
      });
    },
    /**
     * 错误提示
     */
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  /**
   * 传入父组件的方法
   * 用来判断用户点击的按钮是删除还是添加
   */
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditComboDialog", function(combo) {
        this.comboModel = combo;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "修改套餐";
        this.dialogProps.visible = true;
      }),
        this.$on("openAddComboDialog", function() {
          this.comboModel = {};
          this.dialogProps.action = "add";
          this.dialogProps.title = "添加套餐";
          this.dialogProps.visible = true;
        });
    });
  }
};
</script>

<style lang="scss" scoped>
.parent-router-select {
  width: 100%;
}
.Combo-info-tab-pane {
  margin-top: 10px;
}
</style>





